<template>
  <div>
    <van-cell-group title="免费品鉴卡信息" size="large" v-if="bEdit == false">
      <van-cell title="品鉴名称" :value="form.name" />
      <van-cell title="开始时间" :value="form.begin_date" />
      <van-cell title="结束时间" :value="form.end_date" />
      <van-cell title="品鉴说明" :value="form.comment" />
    </van-cell-group>
    <van-cell title="品鉴卡图片上传" size="large"> </van-cell>
    <div style="margin: 0 5px">
      <van-uploader
        accept="image/gif, image/jpeg ,image/png"
        v-model="fileList"
        :after-read="afterRead"
        :before-delete="delImages"
        :max-count="1"
      />
    </div>
    <van-form @submit="onSubmit" v-if="bEdit == true">
      <van-field
        v-model="form.name"
        name="name"
        label="品鉴名称"
        placeholder="品鉴名称"
        :rules="[{ required: true, message: '请填写名称' }]"
      />
      <van-field
        v-model="form.begin_date"
        name="begin_date"
        label="开始时间"
        readonly
        clickable
        placeholder="品鉴开始时间"
        :value="form.begin_date"
        @click="onDateClick('begin_date')"
        :rules="[{ required: true, message: '请填写开始时间' }]"
      />
      <van-field
        v-model="form.end_date"
        name="end_date"
        label="结束时间"
        placeholder="品鉴结束时间"
        readonly
        clickable
        :value="form.end_date"
        @click="onDateClick('end_date')"
        :rules="[{ required: true, message: '请填写结束时间' }]"
      />
      <van-field
        v-model="form.comment"
        name="comment"
        label="品鉴说明"
        placeholder="品鉴说明"
      />
      <div style="margin: 32px 64px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import { get_jsapi_sign } from "@/api/utils";

import {
  getWxCardById,
  cardImageUpload,
  cardImageDel,
  updateWxCard,
} from "@/api/card";
export default {
  name: "CardImage",

  props: ["card_id"],

  data() {
    return {
      flag: this.$route.query.flag,
      fileList: [],
      form: {},
      imgVisible: false,
      bEdit: false,
    };
  },

  computed: {},

  methods: {
    // getJsApiSign() {
    //   const url = location.href.split("#")[0];
    //   get_jsapi_sign(url)
    //     .then((res) => {
    //       const sign = res.data;
    //       this.$wx.config({
    //         debug: false,
    //         appId: sign.appId,
    //         timestamp: sign.timestamp,
    //         nonceStr: sign.nonceStr,
    //         signature: sign.signature,
    //         jsApiList: ["updateAppMessageShareData"],
    //       });
    //       setTimeout(() => {
    //         this.onShare();
    //       }, 1000);
    //     })
    //     .catch((error) => {
    //       console.log(error.message);
    //     });
    // },

    // onShare() {
    //   console.log(this.form);
    //   this.$wx.ready(() => {
    //     this.$wx.updateAppMessageShareData({
    //       title: this.form.name, // 分享标题
    //       desc: this.form.comment, // 分享描述
    //       link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    //       imgUrl: this.form.image || "http://hsh.xzls.vip/media/logohsh.png", // 分享图标
    //       success: function () {
    //         // 设置成功
    //         console.log("successs.....");
    //       },
    //     });
    //   });
    // },

    onSubmit(values) {
      values["id"] = this.form.id;
      updateWxCard(values)
        .then((res) => {
          if (res.status == 200) {
            this.$toast("修改成功!");
            this.goBack();
          }
        })
        .catch((error) => {
          this.$toast("修改失败!" + error);
        });
    },

    goBack() {
      this.$router.push({ name: "CardList" });
    },
    getCardById() {
      getWxCardById(this.card_id)
        .then((res) => {
          this.form = res.data;

          if (res.data.image) {
            this.fileList.push({ url: res.data.image, id: res.data.id });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      file.status = "uploading";
      file.message = "上传中...";
      let data = new FormData();
      //file是当前file对象, 此对象包含file和content
      data.append("card_id", this.card_id);
      data.append("image", file.file);
      cardImageUpload(data)
        .then((res) => {
          file.status = "done";
          this.$notify({
            type: "success",
            message: "图片上传成功",
          });
          file["id"] = res.data.file.id;
        })
        .catch((error) => {
          file.status = "failed";
          file.message = "上传失败";
          this.$notify({
            type: "danger",
            message: "图片上传失败" + error,
          });
        });
    },

    delImages(file) {
      console.log(file);
      cardImageDel(file.id)
        .then(() => {
          this.$notify({
            type: "success",
            message: "图片删除成功",
          });
        })
        .catch(() => {
          this.$notify({
            type: "danger",
            message: "图片删除失败!",
          });
          return false;
        });
      return true;
    },
  },

  mounted() {

    this.getCardById();

    this.bEdit = this.flag == 1;
    // this.getJsApiSign()
  },
};
</script>

<style  scoped>
</style>